<template>
        <!-- <p>天天红包</p> -->
</template>




<style lang="scss" scoped> 
@import '../../assets/css/common.scss';    
    
@function rem($px){
  @return $px / 10 * 1rem;
}
html,body{
    height:100%;
}
body {
    background: #f4f4f4;
}
.page-bg{
    width:100%;
    //height:rem(1005);
    //background:url(../../assets/image/qdgs/checkins.jpg) no-repeat;
	background:#ff695b url('../../assets/image/qdgs/banner-head.jpg') top center no-repeat;
	background-size: 100%;
	min-height: 100%;
}
.page-title{
    font-size:rem(36 / 2);
    color:#fff;
    text-align:center;
    padding-bottom:rem(10 / 2);
}
.page-em{
    font-size:rem(24 / 2);
    color:#fff;
    text-align:center;
    display:block;
    padding-bottom:rem(20 / 2);
}
.checkins{
    font-family: "Microsoft YaHei";
    padding:rem(250 / 2) rem(34 / 2) rem(34 / 2) rem(34 / 2);
    overflow:hidden;
}
//公共内容

.cpn-box {
	/*礼品券内容*/
	width: 100%;
	height: 20rem;
	margin-top: 1rem;
	border-radius:10px;
	padding-top: 1.4rem;
	overflow: hidden;
	
	text-align:  center;
	font-size: 1.8rem;
	line-height: 2.5rem;
	color: #333333;
	
	background:#ffffff url('../../assets/image/qdgs/gs-cpn-content.png') center bottom no-repeat;
    background-size: 32.6rem 19.2rem;
}
.rule-box{
    margin-top: 1rem;
    padding-top:rem(40 / 2);
    border-radius:10px;
    min-height:rem(440 / 2);
    background-color:#fff;
    position:relative;
    .rule-title{
        color:#333333;
        font-size:rem(36 / 2);
        text-align:center;
        margin-bottom:rem(35 / 2);
    }
    .rule-cont{
        width:100%;
        color:#333333;
        font-size:rem(24 / 2);
        padding:rem(5 / 2) rem(80 / 2) rem(75 / 2) rem(80 / 2);
        word-break: break-all;
        .cont-title{
            font-weight:bold;
        }
        p{
            line-height:1.6;
            padding-bottom:rem(10 / 2);
        }
    }
}
.rule-box::after,.rule-box::before{
    content:'';
    width:rem(90 / 2);
    height:rem(90 / 2);
    display:block;
    border-radius:30px;
    background-color:#ff695b;
    position:absolute;
    top:rem(175 / 2);
}
.rule-box::after{
    left:rem(-45 / 2);
}
.rule-box::before{
    right:rem(-45 / 2);
}

//弹层
.pop-on::after{
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background-color:#000;
    opacity:0.8;
}
.pop-main{
    width:rem(430 / 2);
    height:rem(430 / 2);
    border-radius:10px;
    background-color:#fff;
    position:fixed;
    top:rem(325 / 2);
    left:0;
    right:0;
    margin:0 auto;
    z-index:10;
    display:none;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    .pop-title{
        width:rem(284 / 2);
        height:rem(59 / 2);
        font-size:rem(30 / 2);
        color:#fff;
        text-shadow:1px 1px 1px #c43c28;
        text-align:center;
        background:url('../../assets/image/qdgs/title-bg.png') no-repeat;
        background-size:100% 100%;
        margin:rem(-35 / 2) auto rem(14 / 2) auto;
    }
    .pop-cont{
        margin-bottom:rem(15 / 2);
        p{
            text-align:center;
            font-size:rem(24 / 2);
            color:#e84f38;
        }
    }
    .icon-water{
        width:rem(150 / 2);
        height:rem(103 / 2);
        padding-top:rem(120 / 2);
        display:block;
        background:url('../../assets/image/qdgs/water-bg.png') no-repeat;
        background-size:100% 100%;
        font-size:rem(40 / 2);
        color:#fff;
        text-align:center;
        font-weight:bold;
        margin:0 auto rem(20 / 2) auto;
    }
    .pop-btn{
        width:100%;
        height:rem(78 / 2);
        line-height:rem(78 / 2);
        text-align:center;
        font-size:rem(32 / 2);
        color:#fff;
        display:block;
        background-color:#fa3448;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}
.pop-show{
    display:block;
}
</style>

